import { useState, useEffect, ReactNode } from 'react'
import { Tabs } from 'tdesign-react'

import ComponentsCommunication from './ComponentsCommunication'
import NineNineTable from './NineNineTable/NineNineTable' // 创建了组件之后在这里打开注释导入组件

import './index.less'
import NoteBoard from './NoteBoard'
// import AddQuestionnaires from './Questionnaires/components/AddQuestionnaires'
// import NoteBoard from './NoteBoard/NoteBoard'

const { TabPanel } = Tabs

// type TabType = 'components-communication' | 'nine-nine-table' | 'note-board'
type TabType = {
  tabKey: TabKeyType,
  label: string,
  component: ReactNode,
}

type TabKeyType = 'components-communication' | 'nine-nine-table' | 'note-board' | 'questionnaires'

const Practice = (props: any) => {

  const [tabKey, setTabKey] = useState<TabKeyType>('note-board')

  const PracticeTabs: TabType[] = [
    {
      label: '父子组件通信',
      tabKey: 'components-communication',
      component: <ComponentsCommunication />
    },
    {
      label: '九九乘法表',
      tabKey: 'nine-nine-table',
      component: <NineNineTable />
    },
    {
      label: '留言板',
      tabKey: 'note-board',
      component: <NoteBoard />
    },
    // {
    //   label: '问卷调查系统',
    //   tabKey: 'questionnaires',
    //   component: <Questionnaires />
    // },
    // {
    //   label: '添加问卷信息',
    //   tabKey: 'add-questionnaires',
    //   component: <AddQuestionnaires />
    // }

  ]

  return <div className='practice-app'>
    <Tabs
      className='practice-tabs'
      placement='top'
      size='medium'
      defaultValue={tabKey}
      onChange={(value) => { setTabKey(value as TabKeyType) }}
    >
      {PracticeTabs.map((item: TabType) => {
        return <TabPanel label={item.label} value={item.tabKey} key={item.tabKey}> 
          {item.component}
        </TabPanel>
      })}
    </Tabs>
  </div>
}

export default Practice
